{% extends "base.html" %}

{% block title %}Prepare Report | Service Performance Reporting Portal{% endblock %}

{% block extra_css %}

<style>

    .page-header {
        margin-bottom: 28px;
    }

    .page-title {
        margin: 0;
        font-size: 28px;
        font-weight: 700;
        color: #1f2933;
    }

    .page-subtitle {
        margin: 8px 0 0;
        color: #6b7280;
        font-size: 14px;
        line-height: 1.6;
    }

    .report-wrapper {
        max-width: 900px;
    }

    .card {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 14px;
        padding: 32px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
    }

    .report-info {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        margin-bottom: 30px;
    }

    .info-box {
        background: #f9fafb;
        border: 1px solid #e5e7eb;
        border-radius: 9px;
        padding: 16px;
    }

    .info-label {
        display: block;
        margin-bottom: 6px;
        color: #6b7280;
        font-size: 12px;
        font-weight: 500;
    }

    .info-value {
        display: block;
        color: #1f2933;
        font-size: 15px;
        font-weight: 600;
    }

    .form-section {
        margin-top: 30px;
        padding-top: 30px;
        border-top: 1px solid #e5e7eb;
    }

    .form-section:first-of-type {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }

    .section-title {
        margin: 0 0 6px;
        color: #1f2933;
        font-size: 17px;
        font-weight: 700;
    }

    .section-description {
        margin: 0 0 20px;
        color: #6b7280;
        font-size: 13px;
        line-height: 1.6;
    }

    .form-group {
        margin-bottom: 24px;
    }

    .form-group:last-child {
        margin-bottom: 0;
    }

    label {
        display: block;
        margin-bottom: 8px;
        color: #374151;
        font-size: 13px;
        font-weight: 600;
    }

    .required {
        color: #b91c1c;
    }

    .help-text {
        margin-top: 7px;
        color: #6b7280;
        font-size: 12px;
        line-height: 1.6;
    }

    textarea {
        width: 100%;
        min-height: 180px;
        padding: 13px 14px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        background: #ffffff;
        color: #1f2933;
        font-family: "Poppins", Arial, sans-serif;
        font-size: 13px;
        line-height: 1.6;
        resize: vertical;
        outline: none;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    textarea:focus {
        border-color: #1f2933;
        box-shadow: 0 0 0 3px rgba(31, 41, 51, 0.08);
    }

    textarea::placeholder {
        color: #9ca3af;
    }

    .file-box {
        padding: 18px;
        background: #f9fafb;
        border: 1px dashed #cbd5e1;
        border-radius: 9px;
    }

    input[type="file"] {
        width: 100%;
        padding: 11px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        background: #ffffff;
        color: #374151;
        font-family: "Poppins", Arial, sans-serif;
        font-size: 13px;
        cursor: pointer;
    }

    input[type="file"]:focus {
        outline: none;
        border-color: #1f2933;
    }

    .actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
        margin-top: 30px;
        padding-top: 24px;
        border-top: 1px solid #e5e7eb;
    }

    .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border-radius: 8px;
        padding: 11px 19px;
        font-family: "Poppins", Arial, sans-serif;
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        transition: 0.2s ease;
    }

    .button-primary {
        border: none;
        background: #1f2933;
        color: #ffffff;
    }

    .button-primary:hover {
        background: #111827;
    }

    .button-secondary {
        background: #ffffff;
        color: #374151;
        border: 1px solid #d1d5db;
    }

    .button-secondary:hover {
        background: #f9fafb;
        border-color: #9ca3af;
    }

    @media (max-width: 700px) {

        .card {
            padding: 22px;
        }

        .report-info {
            grid-template-columns: 1fr;
        }

        .actions {
            flex-direction: column-reverse;
            align-items: stretch;
        }

        .button {
            width: 100%;
        }

    }

</style>

{% endblock %}


{% block content %}

<div class="page-header">

    <h1 class="page-title">
        Prepare Monthly Report
    </h1>

    <p class="page-subtitle">
        Add the Observium utilization graph and Econet comments
        before making the report available to the school.
    </p>

</div>


<div class="report-wrapper">

    <div class="card">

        <div class="report-info">

            <div class="info-box">

                <span class="info-label">
                    School
                </span>

                <span class="info-value">
                    {{ report.school.name }}
                </span>

            </div>


            <div class="info-box">

                <span class="info-label">
                    Reporting Period
                </span>

                <span class="info-value">
                    {{ report.reporting_period }}
                </span>

            </div>

        </div>


        <form
            method="POST"
            enctype="multipart/form-data"
        >

            <input
                type="hidden"
                name="csrf_token"
                value="{{ csrf_token() }}"
            >


            <div class="form-section">

                <h2 class="section-title">
                    Observium Utilization Graph
                </h2>

                <p class="section-description">
                    Upload the utilization graph that will be inserted
                    into the school's Word report.
                </p>


                <div class="form-group">

                    <label for="graph">
                        Utilization Graph
                        <span class="required">*</span>
                    </label>


                    <div class="file-box">

                        <input
                            type="file"
                            id="graph"
                            name="graph"
                            accept=".png,.jpg,.jpeg"
                            required
                        >

                    </div>


                    <div class="help-text">
                        Accepted formats: PNG, JPG, and JPEG.
                    </div>

                </div>

            </div>


            <div class="form-section">

                <h2 class="section-title">
                    Econet Comments / Observations
                </h2>

                <p class="section-description">
                    Enter the Econet comments for this reporting period.
                    These comments will be inserted underneath the Econet
                    section of the Word report.
                </p>


                <div class="form-group">

                    <label for="econet_comments">
                        Econet Comments
                        <span class="required">*</span>
                    </label>


                    <textarea
                        id="econet_comments"
                        name="econet_comments"
                        placeholder="Enter the Econet comments for this reporting period..."
                        required
                    >{{ request.form.get('econet_comments', '') }}</textarea>


                    <div class="help-text">
                        Enter the service observations or comments that
                        should appear in the final report.
                    </div>

                </div>

            </div>


            <div class="actions">

                <a
                    href="{{ url_for('reports') }}"
                    class="button button-secondary"
                >
                    <i class="fa-solid fa-arrow-left"></i>
                    Cancel
                </a>


                <button
                    type="submit"
                    class="button button-primary"
                >
                    <i class="fa-solid fa-file-circle-check"></i>
                    Prepare Report
                </button>

            </div>

        </form>

    </div>

</div>

{% endblock %}